<template>
  <div class="home-view">
    <!-- 搜索框 -->
    <div class="input">
      <input type="text" placeholder="请输入城市名称" v-model="cityName" />
      <ul>
        <!-- <p>对不起网络似乎出了点问题 请稍后再查询</p> -->
        <p v-if="'data' in cityData && cityData.data.status === '0' && cityName">
          似乎没有找到你查找的城市
        </p>
        <li
          v-else
          v-for="(item, index) in cityList"
          :key="index"
          @click="searchWeather(item.city,item.adcode)"
          
        >
          {{ item.formatted_address }}
        </li>
      </ul>
    </div>
    <!-- 本地存储的城市信息 -->
    <div v-if="!cityName ">
      <div class="locastoreCity" v-for="(item, index) in locastoreCity" :key="index">
        <div class="locastoreCityWeather">
          <h3>{{ item.city }}</h3>
          <span v-if="counterStore.adcodeWeather[index]">{{ counterStore.adcodeWeather[index][0].daytemp }}℃</span>
        </div>
        <div class="btn">
          <button @click="searchWeather(item.city,item.adcode)">查看</button>
          <button @click="delLocaCity(item.city)">删除</button>
        </div>
      </div>
    </div>
    <!-- 本地未存储城市信息时显示 -->
    <h2 v-if="!locastoreCity || !locastoreCity.length" class="nocity" :class="{ nocity_1: cityName }">
      暂时没有保存过城市天气信息，请查询后点击右上角“+”号保存。
    </h2>
    <h2>近期天气</h2>
    <!-- IP地址的天气信息图表 一个表格和一个折线图 -->
    <div class="weatherChart" v-if="counterStore.weather.length">
      <div class="table">
        <div>
          <span>今天</span>
          <span>{{ counterStore.weather[0].date.slice(5, 10) }}</span>
          <span>{{ counterStore.weather[0].dayweather }}</span>
          <span>风力 {{ counterStore.weather[0].daypower }}级</span>
        </div>
        <div>
          <span>明天</span>
          <span>{{ counterStore.weather[1].date.slice(5, 10) }}</span>
          <span>{{ counterStore.weather[1].dayweather }}</span>
          <span>风力 {{ counterStore.weather[1].daypower }}级</span>
        </div>
        <div>
          <span>周{{ week[+counterStore.weather[2].week - 1] }}</span>
          <span>{{ counterStore.weather[2].date.slice(5, 10) }}</span>
          <span>{{ counterStore.weather[2].dayweather }}</span>
          <span>风力 {{ counterStore.weather[2].daypower }}级</span>
        </div>
        <div>
          <span>周{{ week[+counterStore.weather[3].week - 1] }}</span>
          <span>{{ counterStore.weather[3].date.slice(5, 10) }}</span>
          <span>{{ counterStore.weather[3].dayweather }}</span>
          <span>风力 {{ counterStore.weather[3].daypower }}级</span>
        </div>
      </div>
      <div class="lineChart">
        <v-chart :option="lineOption"></v-chart>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { getAdcodeByCity } from '../api/index'
import { useCounterStore } from '@/stores/counter'
  import { useRouter } from 'vue-router'

const counterStore = useCounterStore()
const cityName = ref('')
const cityData = ref({})
const cityList = ref([])
const locastoreCity = ref({})
const week = ['一', '二', '三', '四', '五', '六', '日']
const lineOption = ref({})
const router = useRouter()


// 跳转页面
const searchWeather = (city, adcode) =>{
  router.push(`./search?city=${city}&adcode=${adcode}`)
  counterStore.showSign()
}

// 绘制折线图
const renderLineChart = (data1, data2) => {
  lineOption.value = {
    xAxis: {
      type: 'category',
      show: false
    },
    yAxis: {
      type: 'value',
      show: false
    },
    grid: {
      top: 20,
      left: 0,
      right: 0,
      bottom: 0
    },
    series: [
      {
        data: data1,
        type: 'line',
        smooth: true,
        label: {
          show: true,
          position: 'top',
          formatter: '白{c}°C',
          color: '#fff'
        }
      },
      {
        data: data2,
        type: 'line',
        smooth: true,
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          formatter: '晚{c}°C'
        }
      }
    ]
  }
}
// 删除本地存储的城市信息
const delLocaCity = (city) => {
  locastoreCity.value = locastoreCity.value.filter((item) => item.city !== city)
  localStorage.setItem('savedCities', JSON.stringify(locastoreCity.value))
}
onMounted(() => {
  // 获取存储在本地的城市信息，通过adcode 获取天气数据
  // 如果本地存储中没有 savedCities 键值对，则会返回 null
  // 如果本地存储中有 savedCities 键值对，但为空数组，则会返回 [] 注：空数组的判断条件是true
  locastoreCity.value = JSON.parse(localStorage.getItem('savedCities'))
  // 需要先进行判断，是否有值 
  if (locastoreCity.value && locastoreCity.value.length) {
    locastoreCity.value.forEach(item => {  
      counterStore.getWeatherData(item.adcode)
    });
  }
  counterStore.clearSign()
})
// 监听输入框中城市名称变化，并做信息查询
watch(cityName, async (newVal) => {
  if (newVal) {
    cityData.value = await getAdcodeByCity(newVal)
    cityList.value = cityData.value.data.geocodes
  }
})
// 当该IP地址所在城市天气数据获取成功后，渲染图表
watch(counterStore, (newVal) => {
  // 要判断引起conterStore变化的是不是weather，因为onMounted中触发的getWeatherData()也会改变counterStore
  // 不能直接监听，conterStore.weather，只能监听到counterStore
  const { weather } = newVal
  if (weather) {
    const data1 = weather.map((item) => +item.daytemp)
    const data2 = weather.map((item) => +item.nighttemp)
    renderLineChart(data1, data2)
  }
})
</script>

<style lang="scss" scoped>
.home-view {
  height: 500px;
  .input {
    position: relative;
    margin: 6px 0 20px 0;
    input {
      outline: none;
      box-shadow: none;
      // border : none;
      border-top: 0;
      border-left: 0;
      border-right: 0;
      border-bottom: 1px solid #fff;
      color: #fff;
      font-size: 20px;
      width: 100%;
      height: 60px;
      // margin: 20px 160px 0 160px;
      background-color: transparent;
      &::-webkit-input-placeholder {
        color: rgb(162, 161, 161);
      }
      &:focus {
        border-bottom: 0;
        box-shadow:
          0 10px 15px -3px rgb(0 0 0 / 0.1),
          0 4px 6px -4px rgb(0 0 0 / 0.1);
      }
    }
    ul {
      list-style: none;
      position: absolute;
      width: 100%;
      color: #fff;
      margin-top: 8px;
      font-size: 18px;
      background-color: rgb(0 78 113);
      box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.1),
        0 2px 4px -2px rgb(0 0 0 / 0.1);
      li {
        padding: 20px 0 15px 10px;
        cursor: pointer;
      }
      p {
        padding: 10px;
      }
    }
  }
  .locastoreCity {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 30px;
    cursor: pointer;
    .locastoreCityWeather {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 10px;
      background-color: rgb(0 78 113);
      h3 {
        font-size: 18px;
        margin-right: 10px;
      }
      span {
        font-size: 20px;
        font-weight: bold;
      }
    }
    .btn {
      display: none;
      align-items: center;
      gap: 10px;
      button {
        width: 90px;
        height: 100%;
        background-color: rgb(234 179 8);
        border: 1px solid #004e71;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          background-color: #004e71;
          color: #fff;
        }
      }
    }
    &:hover {
      .locastoreCityWeather {
        transition-duration: 0.5s;
        width: 72%;
      }
      .btn {
        display: flex;
      }
    }
  }
  .nocity {
    text-align: center;
    transition-duration: 0.2s;
  }
  .nocity_1 {
    margin-top: 70px;
  }
  h2 {
    margin-top: 40px;
    padding-left: 2px;
    font-size: 18px;
    font-weight: bold;
  }
  .weatherChart {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 400px;
    background-color: rgb(0 78 113);
    margin: 8px 0 0 0;
    padding: 40px 48px 0 48px;
    .table {
      flex: 1;
      display: flex;
      gap: 6px;

      div {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        text-align: center;
        font-size: 18px;
      }
    }
    .lineChart {
      flex: 1;
      width: 100%;
      margin: 8px 0 0 0;
      padding: 40px 28px 0 28px;
    }
  }
}
</style>
